<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>组件访问</title>
</head>

<body>

  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="myref"></cpn>
    <cpn></cpn>
    <button @click="btnclick">走你~</button>
  </div>

  <template id="cpn">
    <div>
      这是子组件
    </div>
  </template>

  <script src="../vue/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {

      },
      methods: {
        btnclick(){
          //不能这样写： console.log(this.$children)[1]
          //方法一：
          this.$children[1].showmessage();
          //方法二：
          console.log(this.$refs.myref.name)
        }
      },
      components: {
        cpn:{
          template:"#cpn",
          data(){
            return{
              name:"这是子组件的name"
            }
          },
          methods:{
            showmessage(){
              console.log('这是子组件的方法')
            }
          }
        }
      }
    })
  </script>
</body>

</html>